<div>
    <div class="pannel">
        <div class="pannel-head">
            <p>
                <span class="title">公告</span>
                <span class="count"
                    >(<i style="color: #333">{{count.totalNum}}</i>)全部, (<i style="color: #333">{{count.activeNum}}</i>)已发送, (<i style="color: #f00"
                        >{{count.draftNum}}</i
                    >)草稿</span
                >
            </p>
            <button nz-button nzType="primary" [nzSize]="size" [routerLink]='["/home/add"]'><i nz-icon type="plus"></i>新建</button>
        </div>
        <div class="pannel-body">
            <div class="pannel-filter">
                <div class="pannel-filter-left">
                    <nz-select style="width: 120px" [(ngModel)]="pages.status" (ngModelChange)="changeFilter()">
                        <nz-option nzValue="" nzLabel="全部"></nz-option>
                        <nz-option nzValue="Read" nzLabel="已读"></nz-option>
                        <nz-option nzValue="UnRead" nzLabel="未读"></nz-option>
                    </nz-select>
                    <span>公告时间</span>
                    <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
                </div>
                <div class="pannel-filter-right">
                    <nz-input-group [nzSuffix]="suffixIconSearch">
                        <input type="text" nz-input [(ngModel)]="pages.title" placeholder="请输入搜索条件" />
                    </nz-input-group>
                    <ng-template #suffixIconSearch>
                        <a (click)="changeFilter()"><i nz-icon type="search"></i></a>
                    </ng-template>
                </div>
            </div>
            <div>
                <nz-table
                    class="pannel-body-table"
                    #nzTable
                    [nzData]="dataList"
                    [nzShowPagination]="true"
                    [nzLoading]="tableLoading"
                    [nzFrontPagination]="false"
                    [nzPageIndex]="pages.pageNo"
                    [nzTotal]="pages.total"
                    [nzPageSize]="pages.pageSize"
                    [nzPageSizeOptions]="[10,20,30,40,50]"
                    [nzShowQuickJumper]="true"
                    [nzShowSizeChanger]="true"
                    [nzShowTotal]="totalTemplate"
                >
                    <thead>
                        <tr>
                            <th nzWidth="150px">操作人</th>
                            <th nzWidth="200px">消息标题</th>
                            <th>消息内容</th>
                            <th nzWidth="180px">状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of dataList">
                            <td>{{ data.noUserName }}</td>
                            <td>{{ data.title }}</td>
                            <td>{{ data.content }}</td>
                            <td>
                                <!-- <a routerLink="/equipment/detail" [queryParams]="{ id : data.id}"><img src="../../../../assets/img/ck.png" /></a> -->
                                <a (click)="delEquipment(data)"><img src="../../../../assets/img/sc.png" /></a>
                                <a style="margin-left: 5px;" *ngIf="data.active === 'InActive' || data.active === 'Draft'" (click)="openEquipment(data)"><img src="../../../../assets/img/fs.png" /></a>
                                <!-- <a *ngIf="data.active === 'Active'" ><img src="../../../../assets/img/cz-close.png" /></a> -->
                           
                                <!-- <a (click)="detail(data)" *ngIf="data.active === 'Draft'" style="color: #00a4ff">草稿</a>
                                <a (click)="detail(data)" *ngIf="data.active === 'InActive'" style="color: #999999">未发送</a>
                                <a (click)="detail(data)" *ngIf="data.active === 'Active'" style="color: #0bc26d">已发送</a> -->
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
                <nz-modal [(nzVisible)]="isVisible" nzTitle="" [nzClosable]="true" [nzFooter]="null" (nzOnCancel)="handleCancel()">
                    <div style="text-align: center;">
                        <h3>{{article?.title}}</h3>
                        <p class="time" style="color: #999;font-size: 12px;">{{article?.createTime}}</p>
                        <div>{{article?.content}}</div>
                    </div>
                </nz-modal>
                <ng-template #totalTemplate let-total> 共{{ total }}条</ng-template>
            </div>
        </div>
    </div>
</div>
